<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane>
      <span slot="label"><i class="el-icon-ai18 iconfont" /></span>
    </el-tab-pane>
    <el-tab-pane label="后台首页" name="first" />
    <el-tab-pane name="second">
      <span slot="label">新增  <i class="el-icon-guanbi iconfont" /></span>
    </el-tab-pane>
    <el-tab-pane name="third">
      <span slot="label">新增  <i class="el-icon-guanbi iconfont" /></span>
    </el-tab-pane>
    <el-tab-pane name="fourth">
      <span slot="label">岗位列表  <i class="el-icon-guanbi iconfont" /></span>
    </el-tab-pane>
    <el-tab-pane name="fifth">
      <span slot="label">项目负责人列表  <i class="el-icon-guanbi iconfont" /></span>
    </el-tab-pane>
    <el-tab-pane name="close">
      <span slot="label">关闭操作  <i class="el-icon-xiala iconfont" /></span>
    </el-tab-pane>
    <el-tab-pane name="end">
      <span slot="label"><i class="el-icon-forward iconfont" /></span>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'fifth'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style>
    .el-icon-guanbi{
      color: #d1d1d1;
      font-size: 13px;
    }
    .el-tabs--card .el-tabs__header .el-tabs__nav{
        width: 100%;
    }
    .el-tabs--card .el-tabs__header{
        border-bottom:3px solid #304156;
    }
    .el-tabs--card .el-tabs__header .el-tabs__item{
        border-bottom: none;
        color: #666;
        font-weight: bold;
        line-height: 40px;
    }
    .el-tabs--card .el-tabs__header #tab-0{
      margin-left: 10px;
      border-left: 1px solid #E4E7ED;
    }

    .el-tabs--card .el-tabs__header #tab-fifth{
      border-right: 1px solid #E4E7ED;
    }
    .el-tabs--card .is-top .is-active{
        background-color: #304156;
        color: #ddd;
    }

    #tab-close{
        border-right: 1px solid #E4E7ED;
        float: right;
        margin-right: 20px;
    }
    #tab-end{
        /* margin-left:70%; */
        float: right;
    }

</style>

